"use client"
import Icon from '@/components/common/icon'
import Image from '@/components/common/image'
import Link from '@/components/common/link'
import MyButton from '@/components/form/my-button'
import CardList, { Card } from '@/components/layout/card-list'
import { getModelsUrl } from '@/utils/build-url/models'
import React, { useState } from 'react'
import { AiOutlineRight } from 'react-icons/ai'

export interface IBrandsProps {
  id: number
  name: string
  slug: string
  imgUrl: string
}

interface Props {
  list: IBrandsProps[]
}

const AllBrands = ({ list }: Props) => {
  // 状态管理：是否显示全部品牌（默认false，显示前12个）
  const [showAll, setShowAll] = useState(false)
  // 控制显示的品牌列表：showAll为true时显示全部，否则显示前12个
  const displayList = showAll ? list : list.slice(0, 12)

  return (
    <div className="w-full space-y-content-gap-y md:space-y-content-gap-y-md">
      {/* 品牌列表容器 */}
      <CardList className='grid-cols-[repeat(auto-fill,minmax(100px,1fr))]! md:grid-cols-[repeat(auto-fill,minmax(140px,1fr))]! gap-content-gap-y'>
        {displayList.map((item) => (
          <Card key={item.slug}>
            <Link className='flex flex-col items-center gap-content-gap-y md:gap-content-gap-y-md py-card-gap-y md:py-card-gap-y-md' href={getModelsUrl({ language: 'zh', brandSlug: item.slug })}>
              <Image className='max-w-[60px] md:max-w-[80px] aspect-square!' src={item.imgUrl} alt={item.name} />
              <div className='text-center text-sm md:text-base'>{item.name}</div>
            </Link>
          </Card>
        ))}
      </CardList>

      {/* 显示/隐藏全部 按钮（仅当列表总数>12时显示） */}
      {list.length > 12 && (
        <div className="text-center">
          <MyButton variant='link' onClick={() => setShowAll(!showAll)}>{showAll ? '收起全部' : `查看全部（共${list.length}个）`}</MyButton>
        </div>
      )}
    </div>
  )
}

export default AllBrands